<template>
	<template v-for="menu in porps.menus">
		<a-sub-menu v-if="menu.children?.length" :key="menu.id">
			<template #icon>
				<unordered-list-outlined />
			</template>
			<template #title>{{ menu.name }}</template>
			<brs-menu-item :menus="menu.children"></brs-menu-item>
		</a-sub-menu>
		<a-menu-item v-else :key="menu.id">
			<template #icon> <span></span> </template>
			<span>{{ menu.name }}</span>
		</a-menu-item>
	</template>
</template>

<script lang="ts" setup>
	import { UnorderedListOutlined } from '@ant-design/icons-vue';

	type TPorps = {
		menus: ISystem.IMenu[];
	};
	const porps = withDefaults(defineProps<TPorps>(), {
		menus: () => [],
	});
</script>

<style lang="less" scoped></style>
